<template>
  <div class="single_max_height_width">
    <!--  搜索表单  -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline single_form">
      <el-form-item label="权限值">
        <el-input v-model="searchForm.permissionValue" placeholder="权限值"></el-input>
      </el-form-item>
      <el-form-item label="权限名称">
        <el-input v-model="searchForm.permissionName" placeholder="权限名称"></el-input>
      </el-form-item>
      <el-form-item label="目录标志">
        <el-input v-model="searchForm.catalogFlag" placeholder="目录标志"></el-input>
      </el-form-item>
      <el-form-item label="父id">
        <el-input v-model="searchForm.parentId" placeholder="父id"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input v-model="searchForm.createTime" placeholder="创建时间"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage">查询</el-button>
        <el-button type="primary" @click="changeEditForm(null)">新增</el-button>
      </el-form-item>
    </el-form>

    <!--  表格  -->
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'childList', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="permissionValue"
        label="权限值"
        sortable
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="permissionName"
        label="权限名称"
        sortable
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="catalogFlag"
        label="目录标志"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="parentId"
        label="父id"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        sortable
        min-width="180">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button @click="changeEditForm(scope.row.id)" type="text" size="small">编辑</el-button>
        </template>
        <template slot-scope="scope">
          <el-button @click="changeAddPermissionChildForm(scope.row.id)" type="text" size="small">新增子节点</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    <el-table-->
<!--      :data="tableData1"-->
<!--      style="width: 100%"-->
<!--      row-key="id"-->
<!--      border-->
<!--      lazy-->
<!--      :load="load"-->
<!--      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">-->
<!--      <el-table-column-->
<!--        prop="date"-->
<!--        label="日期"-->
<!--        width="180">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="name"-->
<!--        label="姓名"-->
<!--        width="180">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="address"-->
<!--        label="地址">-->
<!--      </el-table-column>-->
<!--    </el-table>-->

    <!--  分页  -->
    <div class="single__hold_page"></div>
    <el-pagination class="single_page"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="searchForm.size"
                   :page-sizes="[5, 10, 15, 20]"
                   :page-size="searchForm.size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <!--  子组件  -->
    <edit :showFlag="editShowFlag" :id="formId" @changeForm="changeEditForm" @reloadTable="findPage"></edit>

    <!--  添加子权限节点  -->
    <add-permission-child :showFlag="AddPermissionChildShowFlag" :parentId="formId" @changeForm="changeEditForm" @reloadTable="findPage"></add-permission-child>
  </div>
</template>

<script>
  import {findPageApi} from '@/api/sys/PermissionApi'
  import edit from './components/edit'
  import addPermissionChild from './components/AddPermissionChild'

  export default {
    name: 'user',
    components: {
      edit,
      addPermissionChild
    },
    data() {
      return {
        // 搜索数据
        searchForm: {
          // 当前页面
          current: 1,
          // 每页大小
          size: 10,
          // 权限值
          permissionValue: '',
          // 权限名称
          permissionName: '',
          // 目录标志
          catalogFlag: true,
          // 父id
          parentId: null,
          // 创建时间
          createTime: null,
        },
        // 表格数据
        tableData: [
          {
            "catalogFlag": "true",
            "catalogFlagName": "是",
            // "childFlag": true,
            "childFlagName": "是",
            "childList": [
              {
                "catalogFlag": "true",
                "catalogFlagName": "是",
                // "childFlag": false,
                "childFlagName": "否",
                "childList": [],
                "createBy": null,
                "createTime": "2022-04-08 17:20:24",
                "deleteFlag": "false",
                "deleteFlagName": "否",
                "id": 3,
                "parentId": 1,
                "permissionName": "3",
                "permissionValue": "3"
              }
            ],
            "createBy": null,
            "createTime": "2022-04-08 17:07:53",
            "deleteFlag": "false",
            "deleteFlagName": "否",
            "id": 1,
            "parentId": 0,
            "permissionName": "1",
            "permissionValue": "1"
          },
          {
            "catalogFlag": "true",
            "catalogFlagName": "是",
            // "childFlag": false,
            "childFlagName": "否",
            "childList": [],
            "createBy": null,
            "createTime": "2022-04-08 17:20:34",
            "deleteFlag": "false",
            "deleteFlagName": "否",
            "id": 4,
            "parentId": 0,
            "permissionName": "1",
            "permissionValue": "1"
          }
        ],
        // 总条数
        total: 0,
        // 编辑框展示标志
        editShowFlag: false,
        // 绑定子组件的id
        formId: null,
        // 添加子节点展示标志
        AddPermissionChildShowFlag: false
      }
    },
    mounted() {
      //this.findPage()
    },
    methods: {
      // 修改每页大小
      handleSizeChange(val) {
        this.searchForm.size = val
        this.searchForm.current = 1
        this.findPage()
      },
      // 修改搜索页面
      handleCurrentChange(val) {
        this.searchForm.current = val
        this.findPage()
      },
      // 查询列表
      findPage() {
        findPageApi(this.searchForm).then((res) => {
          if (res.success) {
            console.log(res)
            this.tableData = res.data.records
            this.total = res.data.total
          } else {
            this.$message.error(res.message);
          }
        })
      },
      // 修改 编辑框 展示状态
      changeEditForm(id) {
        this.formId = id
        this.editShowFlag = !this.editShowFlag
      },
      // 新增 子节点
      changeAddPermissionChildForm(id) {
        this.formId = id
        this.AddPermissionChildShowFlag = !this.AddPermissionChildShowFlag
      }
    },
  }
</script>

<!-- 默认引入公共样式 -->
<style scoped src="@/assets/css/base_single_table.css">

</style>
